<template>
  <div class="drink" v-show="curPageShow">
    <div class="title">

        <div class="m">
            <img src="../assets/img/failed_top_text.png" alt="">
        </div>

    </div>

    
    <div class="container">
         <img v-show="activeDrink.name!='drink3' && activeDrink.name!='drink4' " :src="activeDrink.emptyContain" alt=""> 
         <img class="stepImg" :src="activeDrink.failed.img" alt=""> 
    </div>

<!-- goPerformance_button -->
    <div class="complete_button goPerformance_button animated tada" @click="goCoolDrikroom">
        <img src="../assets/img/go.png" alt="" >
    </div>
    <div class="complete_button animated tada">
        <img src="../assets/img/btn_replay.png" alt="" @click="goDrinkList">
    </div>

    <div class="bottom_text">
    </div>
  </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import preLoadImg from '../mixins/preloadImg.js'
    export default {
        name:'failed',
        mixins:[preLoadImg],
        data(){
            return{
                
            }
        },
        computed:{
            ...mapGetters(['activeDrink'])
        },
        methods:{
            goDrinkList(){
                _hmt.push(['_trackEvent', '重玩', 'click', '重玩'])
                this.$store.dispatch('switchPage','drinkList');
                // document.addEventListener('touchstart',bgMusic_play, false);
            },
            goCoolDrikroom(){
                //去往冰饮节专场
                _hmt.push(['_trackEvent', '去往冰饮节专场', 'click', '去往冰饮节专场'])
                window.location='https://pro.m.jd.com/mall/active/49rzQ3Z1zhJb2vwVeUNWrfSktGT4/index.html'
            }

        },
        mounted(){
            this.preLoadImg()
            setTimeout(()=>{
                this.$store.dispatch('bgMusicPlayToggle',true);
                document.getElementById('bg_music').play()
            }, 3500);
        }

    }
</script>

<style scoped lang="scss">
    .drink{
        position:relative;
        width:100%;
        height:100%;
        background-image:url('../assets/img/empty.png');
        background-repeat:no-repeat;
        background-size:100% 100% ;
        background-attachment: fixed;

        .base_title{
            width:100%;
            text-align:center;
            padding:10px 0;
            img{width:60%;}
        }

        .container{
            $width:75%;
            $height:40%;
            position: absolute;
            top:22%;
            left:35%;
            margin-left:-23%;
            width:$width;
            height:$height;
            img{width:100%;}
            .stepImg{
                position: absolute;
                top:0;
                left:0%;
                width:100%;
            }
        }
        .title{
            $width:85%;
            position: absolute;
            top:5%;
            left:50%;
            margin-left:-$width/2;
            // margin-top:-20px;
            width: $width;
            height: 40px; 
            display: flex;
            animation-iteration-count: 1;
            animation-duration:2s;
            animation-delay:1s;


            .l,.r{
                display: flex;
                flex-direction: column;
                animation-iteration-count: infinite;
                animation-duration:2s;
                animation-delay:2s;

            }
            img{
                width:100%;
                height:100%;
            }
            .l>img,.r>img{height:40%;}
        }
        .complete_button {
            $width:40%;
            position: absolute;
            bottom:15%;
            left:50%;
            margin-left:-$width/2;
            margin-top:-20px;
            width: $width;
            height: 50px;
            // text-align: center;

            img {
                width: 80%;
                height: 70%;
                margin-left:12%;
            }
            .text{
                margin:0;
                width:100%;
                height:30%;
            }
            animation-iteration-count: infinite;
            animation-duration:1s;
        }
        .goPerformance_button{
            bottom:5%;
            animation-delay: 0.5s;
        }
    }
    //  #shake_music{display: none;}
</style>
